<template>
    <button :class="btnSize + ' ' + type + ' ' + plainClass + ' ' + disabledClass" :disabled="disabled">
        <slot name="icon">
        </slot>
        <slot></slot>
        <template v-if="loading">
            <slot name="loading"></slot>
        </template>

    </button>
</template>
<script setup>
import { defineProps, computed, defineExpose } from 'vue';

const props = defineProps({
    size: {
        type: String,
        default: 'default'
    },
    type: {
        type: String,
        default: 'primary'
    },
    plain: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    loading: {
        type: Boolean,
        default: false
    }
})

const btnSize = computed(() => {
    return 'font' + props.size
})

const plainClass = computed(() => {
    return 'plain' + props.plain ? false : true
    //  === 'medium' ? 'btn-medium' : props.size === 'small' ? 'btn-small' : 'btn-large'
    // 
})
const disabledClass = computed(() => {
    return 'disabled' + props.disabled ? 'disabled' : ''
})

defineExpose({
    size: props.size,
    type: props.type,
    disabled: props.disabled
})
</script>
<style scoped>
.fontlarge {
    font-size: 20px;
}

.fontdefault {
    font-size: 16px;
}

.fontsmall {
    font-size: 12px;
}

.primary {
    background-color: red;
    color: white;
}

.success {
    background-color: green;
    color: white;
}

.warning {
    background-color: yellow;
    color: white;
}

.danger {
    background-color: red;
    color: white;
}

.info {
    background-color: blue;
    color: white;
}

.text {
    background-color: gray;
    color: white;
}

.plaintrue {
    background: none;
    color: #000;
}

.disabledtrue {
    background: gray;
    color: white;
}
</style>